@import './variables';

$prefix: $antPrefix + -btn;
$notClasses: '&:not(.#{$prefix}-primary):not(.#{$prefix}-dangerous):not(.#{$prefix}-link):not(.#{$antPrefix}-dropdown-trigger)';
$ghostClass: '.#{$prefix}-background-ghost';

%disabledStyle {
  background-color: $bodyBackground;
  color: $disabledColor;
  &:hover {
    background-color: $bodyBackground;
    color: $disabledColor;
  }
}

%primaryButton {
  &:not([disabled]) {
    &:not(#{$ghostClass}) {
      background-color: $primaryColor;
      &:hover {
        color: $primaryColor;
        background-color: transparent;
        text-shadow: none;
      }
    }
    border-color: $primaryColor;
    &:hover {
      color: $primaryColor;
      background-color: transparent;
    }
    &#{$ghostClass} {
      color: $primaryColor;
      &:hover {
        color: $primaryHover;
      }
    }
  }
  &:disabled {
    border-color: $borderColor;
    &:hover {
      border-color: $disabledColor;
    }
    &:not(#{$ghostClass}) {
      @extend %disabledStyle;
    }
  }
}

%defaultButton {
  &:not([disabled]) {
    background-color: $componentBackground;
    color: $textColor;
    border-color: $borderColor;
    &:hover {
      color: $primaryColor;
      border-color: $primaryColor;
    }
  }
  &:disabled {
    color: $disabledColor;
    background-color: $bodyBackground;
    border-color: $borderColor;
  }
}

%linkButton {
  &:not(disabled) {
    color: $primaryColor;
    border: none;
    &:hover,
    &:focus {
      color: $primaryHover;
    }
    &#{$ghostClass}:hover {
      color: $primaryHover;
    }
  }
  &:disabled {
    color: $disabledColor;
    &:hover {
      color: $disabledColor;
    }
  }
}

%dangerButton {
  &:not(disabled) {
    background-color: $secondaryColor;
    color: $secondaryHover;
    border-color: $secondaryColor;
    &:hover,
    &:focus,
    &:active {
      background-color: transparent;
      color: $secondaryColor;
      border-color: $secondaryColor;
    }
  }
  &:disabled {
    @extend %disabledStyle;
    border-color: $borderColor;
    &:hover {
      border-color: $borderColor;
    }
  }
  &.#{$prefix}-link:disabled {
    color: $disabledColor;
    &:hover {
      color: $disabledColor;
    }
  }
  &.#{$prefix}-background-ghost {
    border-color: $secondaryColor;
    color: $secondaryColor;
    &:hover,
    &:focus,
    &:active {
      border-color: $secondaryColor;
      color: $secondaryColor;
    }
  }
}

%ghostButton {
  &:not(disabled) {
    &.#{$prefix}-primary:hover,
    &.#{$prefix}-primary:focus {
      border-color: $primaryColor;
    }
  }
  &:disabled {
    color: $disabledColor;
    &:hover {
      color: $disabledColor;
    }
  }
}

.#{$prefix}-primary {
  @extend %primaryButton;
}
.#{$prefix}-link {
  @extend %linkButton;
}
.#{$prefix}-dangerous {
  @extend %dangerButton;
}
.#{$prefix}-background-ghost {
  @extend %ghostButton;
}
.#{$prefix} {
  &::before {
    background: $bodyBackground;
  }

  & > svg {
    transition: margin-left 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  & > svg + span,
  & > span + svg {
    margin-left: 8px;
  }

  #{$notClasses} {
    @extend %defaultButton;
  }
  &-lg {
    font-size: 1rem;
  }
  &-sm {
    line-height: 100%;
  }
}
